@import url("./common.less");

#header{
	width: 100%;
    height: 80px;
    position: fixed;
    background-color: rgba(255,255,255,.9);
    z-index: 100;
    box-shadow: 0px 0px 5px #CCCCCC;
    h1{
    	width: 240px;
	    height: 40px;
	    position: absolute;
	    left: 50px;
	    top: 50%;
	    margin-top: -20px;
    }
    .animate{
    	transition-duration: .5s;
    }
    #nav{
    	width: 840px;
	    height: 100%;
	    position: absolute;
	    right: 0px;
	    top: 0px;
	    ul{
	    	width: 100%;
    		height: 100%;
    		li{
    			width: 16.5%;
			    height: 100%;
			    float: left;
			    position: relative;
			    overflow: hidden;
    			.first{
    				width: 17.5%;
    			}
    			a{
    				display: block;
				    width: 100%;
				    height: 100%;
				    position: relative;
				    text-align: center;
				    color: #3E3E3E;
				    position: relative;
				    strong{
				    	width: 100%;
					    height: 25px;
					    line-height: 25px;
					    position: absolute;
					    top: 50%;
					    margin-top: -15px;
					    left: 0px;
					    -webkit-transition-duration: .5s;
					    transition-duration: .5s;
				    }
				    p{
				    	width: 100%;
					    height: 20px;
					    line-height: 20px;
					    position: absolute;
					    top: 50%;
					    left: 0px;
					    font-size: 12px;
					    text-transform: uppercase;
					    margin-top: 5px;
					    opacity: .5;
					    -webkit-transition-duration: .5s;
					    transition-duration: .5s;
					    -moz-transition-duration: .5s;
				    }
				    span{
				    	width: 0px;
					    height: 0px;
					    border-left: 8px solid transparent;
					    border-right: 8px solid transparent;
					    border-bottom: 8px solid #1BD0DA;
					    position: absolute;
					    left: 50%;
					    margin-left: -8px;
					    bottom: 0px;
					    display: block;
					    filter: alpha(opacity=0);
					    opacity: 0;
					    -webkit-transition-duration: .5s;
					    transition-duration: .5s;
					    -moz-transition-duration: .5s;
					    bottom: -8px;
				    }
    			}
    			a:hover{
    				color: #17BEC7;
    			}
    		}
    		.cur{
    			a{
    				color: #17BEC7;
    			}
    			span{
    				filter: alpha(opacity=100);
				    opacity: 1;
				    bottom: 0px;
    			}
    		}
	    }
    }
}